import { useContext } from "react"
import { Store, action, Button } from "../dComponent"

function Predux(props){
    const redux = useContext(Store)
    return(
        <div className="page">
            <h2>Redux-基于useReducer</h2>
            <div className="flexBox">
                <Button
                    onClick={()=>{
                        redux.dispatch(action.update('num',isNaN(redux.state.num)?0:redux.state.num + 1))
                    }}
                    cls={'left-30'}
                >加</Button>
                <Button
                    onClick={()=>{
                        redux.dispatch(action.update('num',isNaN(redux.state.num)?0:redux.state.num - 1))
                    }}
                    cls={'left-30'}
                >减</Button>
                <Button
                    onClick={()=>{
                        redux.dispatch(action.create(`num`,0))
                    }}
                    cls={'left-30'}
                >
                    添加
                </Button>
                <Button
                    onClick={()=>{
                        redux.dispatch(action.delete(`num`))
                    }}
                    cls={'left-30'}
                >
                    删除
                </Button>
            </div>
            <div className="flexBox" style={{fontSize:'30px', textAlign:'center'}}>
                {
                    redux.state.num
                }
            </div>
            <br/>
        </div>
    )
}
export default Predux